<template>
  <div>
    <p>{{name}}</p>
    <p>{{people.name}}</p>
    <p>{{people.age}}</p>
    <button @click="changeInfo"> 修改信息 </button>
    <br />
    <button @click="changObjInfo"> 修改对象信息 </button>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("测试");
    let people = reactive({
      name: "测试",
      age: 12,
    });
    function changeInfo() {
      name.value = "修改后的姓名";
    }
    function changObjInfo() {
      people.name = "修改后的对象名称";
      people.age = 23;
    }
    return {
      name,
      people,
      changeInfo,
      changObjInfo,
    };
  },
};
</script>

<style>
</style>
